<%--
  Created by IntelliJ IDEA.
  User: Li Chuanwei
  Date: 2023-07-16
  Time: 1:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加公告</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
  <script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="utf-8"></script>
  <script src="${pageContext.request.contextPath}/static/js/showBigImage.js" charset="utf-8"></script>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/public.css" media="all">
  <link href="${pageContext.request.contextPath}/static/wangEditor/style.css" rel="stylesheet">
  <script src="${pageContext.request.contextPath}/static/wangEditor/index.js"></script>
  <style>

    .layui-container{
      flex: 9.1;
      width: 100%;
      display: grid;
      background-color: #ffffff
    }

    #editor—wrapper {
      border: 1px solid #ccc;
      z-index: 100; /* 按需定义 */
      margin-left: 2%;
      width: 97%;
    }
    #toolbar-container { border-bottom: 1px solid #ccc; }
    #editor-container { height: 500px; }

    .layui-container .layui-form-label{
      width: 10vw;
      text-align: left;
      margin-left: 2%;
    }

    .layui-container input{
      margin-left: 2%;
      width: 97%;
      border: 1px solid #ccc;
    }
    .layui-container h2{
      text-align: center;
      margin-top: 2%;
    }

    .button-container{
      margin-top: 2%;
      margin-left: 2%;
      margin-bottom: 5%;
    }
    .button-container button{
      margin-right: 2%;
    }
  </style>
</head>
<body>
<div class="layuimini-container ">
  <div class="layuimini-main">
    <div class="layui-container">
      <div>
        <h2>发 布 公 告</h2>
      </div>
      <div>
        <label class="layui-form-label">公告标题</label>
        <input type="text" name="title" lay-verify="required"
               placeholder="请输入标题" autocomplete="off" class="layui-input">
        <label class="layui-form-label">公告内容</label>
      </div>
      <div>
        <div id="editor—wrapper">
          <div id="toolbar-container"><!-- 工具栏 --></div>
          <div id="editor-container"><!-- 编辑器 --></div>
        </div>
      </div>
      <div class="button-container">
        <button type="button" class="layui-btn layui-btn-normal" id = "submit">发布</button>
        <button type="button" class="layui-btn layui-btn-normal" id = "view">预览</button>
        <button type="button" class="layui-btn layui-btn-normal" id = "reset">清空</button>
      </div>
    </div>
  </div>
</div>
<script defer = "true">
  const {createEditor, createToolbar} = window.wangEditor

  const editorConfig = {
    placeholder: '请在此处输入要输入的相关信息',
    // onChange(editor) {
    //     const html = editor.getHtml()
    //     console.log('editor content', html)
    //     // 也可以同步到 <textarea>
    // }
  }

  const editor = createEditor({
    selector: '#editor-container',
    html: '',
    config: editorConfig,
    mode: 'default', // or 'simple'
  })

  const toolbarConfig = {}

  const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default', // or 'simple'
  })

  layui.use(['layer'], function(){
    var layer = layui.layer;

    // 点击按钮的事件处理
    $('#view').click(function(){
      var content = editor.getHtml(); // 获取编辑器内容
      var cssContent = "<link href=\"" + "${pageContext.request.contextPath}/static/css/editor.css" + "\" rel=\"stylesheet\">";

      // 弹出窗口
      layer.open({
        title: '公告预览',
        type: 1,
        maxmin: true,
        area: ['70%', '80%'],
        content: cssContent + "<div class='editor-content-view'>" + content + "</div>",
        offset: ['50px', '330px'],
        scrollbar:false
      });
    });
    $('#reset').click(function(){
      editor.clear();
    });
  });
</script>
</body>
</html>
